import React, { useEffect, useState, useContext } from 'react';
import { useParams } from 'react-router-dom';
import { interfaceConfig } from '@/config/interfaceConfig';
import request from '@/utils/request';
import moment from 'moment';
import { Skeleton } from 'antd';
import _ from 'lodash';
import { Tabs } from 'antd';
import { TabsConfig } from './config';
import SongList from './SongList';
import { AppContext } from '@/config/glableContextConfig';
import { imgLazy } from '@/utils/tools';
import Comment from './Comment';

const { TabPane } = Tabs;

const Components = {
  SongList,
  Comment,
};

const SongListDetail = () => {
  const { id } = useParams();
  const [playlist, setPlaylist] = useState({});

  const { setSongList, setList_key, setIsPlayer } = useContext(AppContext);
  useEffect(() => {
    request
      .get(interfaceConfig.SongListDetail, {
        params: {
          id,
        },
      })
      .then((ret) => {
        if (ret.code === 200) {
          setPlaylist(ret.playlist);
        }
      });
  }, []);
  useEffect(() => {
    if (!_.isEmpty(playlist)) {
      imgLazy();
    }
  }, [playlist]);
  const playerAllSong = () => {
    request
      .get(interfaceConfig.SongPlayer, {
        params: {
          id: playlist.tracks[0].id,
        },
      })
      .then((ret) => {
        if (ret.code === 200) {
          setSongList(playlist.tracks);
          setList_key(ret.data[0].id);
          setIsPlayer(true);
        }
      });
  };
  return (
    <div id="SongListDetail">
      <div className="header-wrap">
        <div className="img-wrap">
          {playlist.coverImgUrl ? <img data-src={playlist.coverImgUrl} className="img" alt="" /> : <Skeleton.Image className="img" />}
        </div>
        <div className="info-wrap">
          <Skeleton loading={_.isEmpty(playlist)}>
            <p style={{ marginBottom: 20 }}>{playlist.name}</p>
            <div className="author-wrap">
              <img data-src={playlist.creator?.avatarUrl} alt="" />
              <span style={{ marginRight: 10 }}>{playlist.creator?.nickname}</span>
              <span className="time">{moment(playlist.updateTime).format('YYYY/MM/DD')} 创建</span>
            </div>
            <div className="player-wrap">
              <span className="text" onClick={() => playerAllSong()}>
                播放全部
              </span>
            </div>
            <div className="tag-wrap">
              <span className="title">标签:</span>
              <ul>
                {_.map(playlist.tags, (item, key) => {
                  return (
                    <li key={key}>
                      {key === 0 ? (
                        item
                      ) : (
                        <>
                          <span className="span_dir">/</span>
                          <span>{item}</span>
                        </>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
            <div className="desc-wrap">
              <span className="title">简介:</span>
              <span>{playlist.description}</span>
            </div>
          </Skeleton>
        </div>
      </div>
      <Skeleton loading={_.isEmpty(playlist)}>
        <Tabs>
          {_.map(TabsConfig, (item, key) => {
            const Component = item.component ? Components[item.component] : '';
            return (
              <TabPane tab={item.name} key={item.id}>
                <Component playlist={playlist} />
              </TabPane>
            );
          })}
        </Tabs>
      </Skeleton>
    </div>
  );
};

export default SongListDetail;
